<template>
	<view class="page">
		<!-- 分类 -->
		<view class="gender-item" v-for="(item,index) in items" :key="item.value">
			<view class="gender-item-title">{{item.genderName}}</view>
			<view class="major-box">
				<view class="major-item" v-for="(subItem,subIndex) in item.data" :key="subItem.id"
					@tap="itemsToDetail(subItem,item)">
					{{subItem.major}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	}
	from 'vuex'

	export default {
		data() {
			return {
				items: [],
			}
		},
		computed: {
			...mapGetters({
				'curSource': 'get_curSource'
			}),
		},
		watch: {
			curSource(nVal, oVal) {
				this.getCategoryData()
			}
		},
		onNavigationBarButtonTap(e) {
			// 搜索按钮
			if (e.index === 0) {
				uni.navigateTo({
					url: '/pages/sort/search'
				})
			}
		},
		onPullDownRefresh() {
			this.getCategoryData()
		},
		onLoad() {
			this.getCategoryData()
		},
		methods: {
			async getCategoryData() {
				let res = await this.$store.dispatch('getCategoryData')
				if (res) {
					this.items = res
					setTimeout(() => {
						//停止下拉刷新
						uni.stopPullDownRefresh();
					}, 1000)
				}
			},
			itemsToDetail(subItem, item) {
				uni.navigateTo({
					url: `/pages/sort/major?genderName=${item.genderName||subItem.major}&href=${subItem.href}&major=${subItem.major}`
				})
			}
		}
	}
</script>
<style lang="scss">
	.gender-item {

		.gender-item-title {
			padding: 0 30rpx;
			line-height: 120rpx;
			color: #999;
		}

		.major-box {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.major-item {
				flex: 0 0 33.33%;
				height: 120rpx;
				font-size: 30rpx;
				line-height: 120rpx;
				font-weight: 700;
				text-align: center;
				border: 2rpx solid #f8f8f8;
				border-left: 0;
				box-sizing: border-box;
			}

			.major-item:nth-child(3n+3) {
				border-right: none;
			}

			.major-item:nth-child(n+4) {
				margin-top: -2rpx;
			}
		}
	}
</style>
